<template>
  <el-container>
        <!--  文章详情展示    -->
        <el-header height="40%">
          <el-button-group style="float: right">
            <el-tooltip content="查看全文" placement="bottom" effect="light">
              <el-button type="primary" size="small" icon="el-icon-document"></el-button>
            </el-tooltip>

            <el-tooltip content="分享" placement="bottom" effect="light">
              <el-button type="primary" size="small" icon="el-icon-share"></el-button>
            </el-tooltip>

            <el-tooltip content="下载" placement="bottom" effect="light">
              <el-button type="primary" size="small" icon="el-icon-download"></el-button>
            </el-tooltip>


          </el-button-group>
          <span class="title">{{result.title}}</span>

          <div class="infos">
            <span class="info">{{result.author}}</span>
            <span class="info">{{result.time}}</span>
            <el-tag
                v-for="(tag,index) in tags"
                :type="tagType[index%4]"
                class="tag"
                effect="dark">
              {{ tag }}
            </el-tag>
          </div>
        </el-header>

        <el-main>
          <div class="details clearfix">
            <span class="detail_title clearfix">关键字:</span>  <span v-html="result.keywords" class="detail_info clearfix" ></span>
          </div>
          <div class="details clearfix">
            <span class="detail_title clearfix">摘要:</span> <span v-html="result.createAbstract" class="detail_info clearfix"></span>
          </div>

          <div class="suggest">
              <!--相关文章推荐-->
              <el-divider content-position="left">
                <span style="font-weight: bold;font-size:18px;">相关推荐 <i class="el-icon-star-off"></i></span>
              </el-divider>

            <br>
              <el-tabs v-model="activeName" @tab-click="handleSuggest">
                <el-tab-pane label="项目组相关" style="font-weight: bold" name="first">
                  <div class="item" v-for="file in titleSuggest">
                    <el-link :underline="false" type="primary" class="suggest_item">{{ file.title }}</el-link>
                    <el-link :underline="false" type="primary" class="suggest_item">{{ file.author }}</el-link>
                  </div>
                </el-tab-pane>

                <el-tab-pane label="作者相关" name="second">
                  <div class="item" v-for="file in authorSuggest">
                    <el-link :underline="false" type="success" class="suggest_item">{{ file }}</el-link>
                  </div>
                </el-tab-pane>

                <el-tab-pane label="相关图纸" name="third">

                  <viewer :images="PicSuggest">
                    <img
                        v-for="(src,index) in PicSuggest"
                        :src="src"
                        :key="index"
                        width="300"
                        style="cursor: pointer"
                        >
                  </viewer>

                </el-tab-pane>
              </el-tabs>
          </div>
        </el-main>

  </el-container>

</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      id: 'fff',
      keyword: '',
      result: {},
      tagType: [" ","info","success","danger"],
      tags: ["二回路","论文","绝密"],
      // 右侧推荐
      activeName: 'first',
      titleSuggest: [{"id":"","title":"flaksdfjl","author": "asdf","time":""},
                    "浅析钠冷快堆电厂涉钠系统安全风险及操作规范","低浓度成膜胺环境下压水堆核电站二回路金属材料的均匀腐蚀评估","核电站冷凝器管板密封焊的缺陷在线修复","核电厂二回路汽水管道局部减薄管理的挑战和应对"],
      authorSuggest:["浅析钠冷快堆电厂涉钠系统安全风险及操作规范","蒸汽发生器二次侧排污取样管路堵塞问题及其解决方案","低浓度成膜胺环境下压水堆核电站二回路金属材料的均匀腐蚀评估","核电站冷凝器管板密封焊的缺陷在线修复","核电厂二回路汽水管道局部减薄管理的挑战和应对"],
      PicSuggest: ["https://img1.baidu.com/it/u=2137558045,2111381556&fm=26&fmt=auto&gp=0.jpg",
        "https://img2.baidu.com/it/u=2524805143,1810540793&fm=26&fmt=auto&gp=0.jpg",
        "https://img2.baidu.com/it/u=1144488669,1750502198&fm=26&fmt=auto&gp=0.jpg",
        "https://img1.baidu.com/it/u=2521189693,2219859097&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=489108224,94770886&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=3203942120,2584810931&fm=26&fmt=auto&gp=0.jpg"]
    }
  },
  created() {

  },
  mounted() {

  },
  activated() {
    // 获得传入的id和keyword
    this.id = this.$route.query.id
    this.keyword = (this.$route.query.keyword == "")?'*':this.$route.query.keyword
    this.searchById()
  },
  methods:{
    onBack(){
      this.$router.push(
          {
            path: `/search`
          }
      )
    },
    searchById(){
      const _this = this
      axios.get('search/searchById/' + this.id + '/' + this.keyword).then(function (resp) {
        _this.result = resp.data.data.result
      })
    },
    handleSuggest(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
span{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.title{
  font-weight: bold;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-size: 20px;
  display:inline-block
}
/*作者、时间、标签*/
.infos{
  margin-top: 20px;

}
.info{
  margin-right: 5%;
  font-style: italic;
  font-size: 16px;
}
.tag{
  margin-right: 6px;
}
/*摘要、关键字*/
.details{
  width: 100%;
  margin-top: 28px;
}
.detail_title{
  font-weight: bold;
  display: block;
  height: 100%;
  float: left;
}
.detail_info{
  display: block;
  float: left;
  padding:0 0 0 2em;
  text-indent:-1.5em;
  font:normal normal 16px/1.6em "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  color:#000;

}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
/*右侧推荐*/
.item {
  margin-bottom: 18px;
}
.suggest{
  margin-top: 40px;
}
.suggest_item{
  font-weight: bolder;
  text-align: left;
  font-size: 14px;
  width: 100%;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
